<template>
  <div id="TheryTable">
    <div style="height: 40px">
      <span style="font-size: 30px; color: white">{{
        detailData.courseName
      }}</span>
      <span style="margin-left: 80px; color: white">关键字：</span>
      <a-input style="width: 200px;color: white;"></a-input>
      <a-button type="primary" style="margin-left: 10px" @click="getData"
        >查询</a-button
      >
      <a-button type="primary" style="margin-left: 10px" @click="goBack"
        >返回</a-button
      >
    </div>
    <a-table
      bordered
      :scroll="{ y: 580 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => index"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation">
        <span style="cursor: pointer; color: #1890ff">关联TAPD项目</span>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  props: {
    detailData: {},
  },
  data() {
    return {
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "id",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "姓名",
          dataIndex: "userName",
          customRender: (text, record) => {
            return record.userName ? record.userName : "—";
          },
        },
        {
          title: "所属班级",
          dataIndex: "class",
          customRender: (text, record) => {
            return record.class ? record.class : "—";
          },
        },
        {
          title: "所属届",
          dataIndex: "year",
          customRender: (text, record) => {
            return record.year ? record.year : "—";
          },
        },
        {
          title: "考核科目",
          dataIndex: "paperName",
          customRender: (text, record) => {
            return record.paperName ? record.paperName : "—";
          },
        },
        {
          title: "分数",
          dataIndex: "paperScore",
          customRender: (text, record) => {
            return record.paperScore ? record.paperScore : "—";
          },
        },
        {
          title: "考核用时",
          dataIndex: "doTime",
          customRender: (text, record) => {
            return record.doTime ? record.doTime : "—";
          },
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          customRender: (text, record) => {
            return record.createTime ? record.createTime : "—";
          },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        size: "10",
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    goBack() {
      this.$emit("goBack");
    },
    async getData() {
      let { data } = await this.$axios.get("/sys/coursePlan/page", {
        params: {
          page: this.tablePagination.current,
          limit: this.tablePagination.size,
          coursePlanName: this.keyword, //关键字(也是课程计划名)
          coursePlanId: this.detailData.id, //课程ID
        },
      });
      data.data.list.forEach((item) => {
        item.year = this.detailData.year;
        item.class = this.detailData.class;
      });
      this.tableData = data.data.list;
      this.tablePagination.total = data.data.list.length;
    },
  },
};
</script>
<style lang="scss" scoped>
#TheryTable{
    height: 600px;
}
</style>
    